<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">硕士学位申请系统</el-breadcrumb-item>
            <el-breadcrumb-item>我的预审</el-breadcrumb-item>
        </el-breadcrumb>
        <el-tabs v-model="activeName" @tabclick="tabToggle">
            <el-tab-pane label="预审信息确认" name="confirm">
                <!--                <h2 class="function">论文预审信息确认</h2>-->
                <el-form :model="form" :rules="rules" ref="form" label-width="140px" class="demo-ruleForm">

                    <el-form-item label="学号" prop="studentId">
                        <el-input
                                placeholder="请输入你的学号"
                                v-model="form.studentId" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="论文题目(中文)" prop="paperName">
                        <el-input
                                placeholder="请输入论文的中文题目"
                                v-model="form.paperName"></el-input>
                    </el-form-item>

                    <el-form-item label="论文题目(英文)" prop="paperNameEn">
                        <el-input
                                placeholder="请输入论文的英文题目"
                                v-model="form.paperNameEn"></el-input>
                    </el-form-item>

                    <el-form-item label="论文涉及的研究方向" prop="subject">
                        <el-autocomplete
                                style="width: 100%"
                                v-model="form.researchPoints"
                                :fetch-suggestions="querySearch"
                                placeholder="请输入你的研究方向"
                                @select="handleSelect"
                        ></el-autocomplete>
                    </el-form-item>


                    <el-form-item label="摘要" prop="abstract">
                        <el-input
                                type="paperAbstract"
                                :rows="10"
                                placeholder="请输入摘要"
                                v-model="form.paperAbstract">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="创新点和内容" prop="novel">
                        <el-input
                                type="paperAbstract"
                                :rows="8"
                                placeholder="请输入创新点"
                                v-model="form.novel">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="论文不足之处及改进方法" prop="disadvantage">
                        <el-input
                                type="paperAbstract"
                                :rows="8"
                                placeholder="请输入不足之处以及改进方案"
                                v-model="form.disadvantage">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="论文其他要说明的情况" prop="remarks">
                        <el-input
                                type="paperAbstract"
                                :rows="4"
                                placeholder="如有额外说明的情况，请备注"
                                v-model="form.others">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">提交</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="预审结果" name="result">
                <el-form :model="form" :rules="rules" ref="form" label-width="140px" class="demo-ruleForm" disabled>

                    <el-form-item label="学号" prop="studentId">
                        <el-input
                                placeholder=""
                                v-model="form.studentId" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="论文题目(中文)" prop="paperName">
                        <el-input
                                placeholder=""
                                v-model="form.paperName"></el-input>
                    </el-form-item>

                    <el-form-item label="论文题目(英文)" prop="paperNameEn">
                        <el-input
                                placeholder=""
                                v-model="form.paperNameEn"></el-input>
                    </el-form-item>


                    <el-form-item label="论文预审结果" prop="result">
                        <el-radio-group v-model="result">
                            <el-radio label="同意">同意</el-radio>
                            <el-radio label="不同意">不同意</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>


    </div>

</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            activeName: "confirm",
            form: {
                studentId: '',
                paperName: '',
                paperNameEn: '',
                paperAbstract: '',
                researchPoints: '',
                novel: '',
                disadvantage: '',
                others: ''
            },
            comment: '',
            result: '',
            rules: {//这里面设置必填属性的一些设置
                paperName: [
                    {required: true, message: '请输入你的论文题目', trigger: 'blur'},
                    {min: 1, max: 8, message: '长度在 1 到 30 个汉字', trigger: 'blur'}
                ],
            }
        };
    },
    methods: {
        getPreReviewResult() {
            axios({
                url: `http://localhost:8888/paper/info/result/${this.id}`,
                responseType: 'json',
                method: 'get',
            }).then(res => {
                this.result = res.data.data.isQualified;
            })
        },
        tabToggle(tab, event) {
            console.log(tab, event)
        },
        updatePaperInfo() {
            axios({
                url: `http://localhost:8888/paper/info/edit/${this.id}`,
                method: "put",
                data: {
                    "paperName": this.form.paperName,
                    "paperNameEn": this.form.paperNameEn,
                    "researchPoints": this.form.researchPoints,
                    "paperAbstract": this.form.paperAbstract,
                    "novel": this.form.novel,
                    "disadvantage": this.form.disadvantage,
                    "others": this.form.others,
                },
            })
                .then(res => {
                    console.log(res);
                    // 根据需要处理请求成功后的逻辑
                })
                .catch(err => {
                    console.log(err);
                    // 根据需要处理请求失败后的逻辑
                });
        },
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // 验证通过，提交表单
                    this.updatePaperInfo(); // 使用箭头函数调用 updatePaperInfo()
                    alert('提交成功!');
                } else {
                    alert('提交失败，请重新提交');
                    return false;
                }
            });
        },
        getPaperInfoById() {
            axios({
                url: `http://localhost:8888/paper/info/detail/${this.id}`,
                method: "get",
                responseType: "json",
            }).then(res => {
                const paperInfo = res.data.data;
                this.form.studentId = paperInfo.studentId;
                this.form.paperName = paperInfo.paperName;
                this.form.paperNameEn = paperInfo.paperNameEn;
                this.form.researchPoints = paperInfo.researchPoints;
                this.form.paperAbstract = paperInfo.paperAbstract;
                this.form.novel = paperInfo.novel;
                this.form.disadvantage = paperInfo.disadvantage;
                this.form.others = paperInfo.others;
            }).catch(err => {
                console.log(err);
            })
        },
        resetForm() {
            this.$refs.form.resetFields();
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        querySearch(queryString, cb) {
            let rank = this.rank;
            let results = queryString ? rank.filter(this.createFilter(queryString)) : rank;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        loadRank() {
            return [
                {"value": "嵌入式"},
                {"value": "软件测试"},
                {"value": "人工智能"},
                {"value": "模型检测"}
            ];
        },
        handleSelect(item) {
            console.log(item)
        }
    },
    mounted() {
        this.id = localStorage.getItem('username');
        this.rank = this.loadRank();
        this.getPaperInfoById();
        this.getPreReviewResult();
    }
}
</script>

<style scoped>

</style>